<template>
    <div class="personal layout-pd">
        <ul v-infinite-scroll="scrollLoad" class="infinite-list" style="overflow: auto">
            <li v-for="(item, index) in listData" :key="index" class="infinite-list-item">
                <div>
                    <div class="div-time">
                    <span style="font-size: 12px;
                        background-color: #dfdfdf;
                        color: white;
                        padding: 3px;
    border-radius: 2px;">{{ item.sendTime }}</span>
                </div>

                <div class="div-card">
                    <div class="div-head"> {{ item.type == 'shareJoin' ? '邀请信息' : '站内信' }}</div>
                    <div class="div-content">{{ item.content }}</div>
                    <div class="div-content" v-if="item.type == 'shareJoin' && item.operationJson.value.lifespan > 0">有效期：请在{{ item.operationJson.value.lifespan }}天内进行处理</div>
                    <div class="div-bottom" @click="goDetail(item)">
                        <span>查看详情</span>
                        <p class="p-icon">></p>
                    </div>
                    <!-- <div class="div-bottom"> <span>查看详情</span>
                        <p class="p-icon">></p>
                    </div>
                    <div class="div-bottom"> <span>查看详情</span>
                        <p class="p-icon">></p>
                    </div> -->
                </div>
                </div>
            </li>
        </ul>

        <p style="text-align:center" v-if="isShowNot">
            <el-button type="text"> 没有更多了 </el-button>
        </p>


    </div>
</template>
<script  lang="ts" name="messages">
import { reactive, computed, onMounted, toRefs, ref } from 'vue';
import { formatAxis } from '/@/utils/formatTime';
import {useRoute,useRouter} from 'vue-router'
import { useUserInfo } from '/@/stores/userInfo'
import { storeToRefs } from 'pinia';
import Cookies from 'js-cookie'
import { Session, Local } from '/@/utils/storage'
import { ElMessage, ElMessageBox } from 'element-plus'
import { queryList } from '/@/api/sys/message'
export default {
    setup(props, context) {
        const storeUserInfo = useUserInfo()
        const router = useRouter()
        const { userInfos } = storeToRefs(storeUserInfo)
        // 定义变量内容
        const state = reactive({
            uploadUrl: '/api/file/filaAttach/upload',
            headers: {
                '17work': Session.get('token')
            },
            formSize: 'small',
            count: 10,
            listData: [],
            queryData:{
                current: 1, 
                size: 10
            },
            pages:0,
            isShowNot: false
        });

        // 当前时间提示语
        const currentTime = computed(() => {
            return formatAxis(new Date());
        });
        const backageImagesOnSuccess = (response, uploadFiles) => {
        }


        const getPages = () => {
            queryList(state.queryData).then(res => {
                if (res.code == 0) {
                    for(let d of res.data.records){
                        state.listData.push(d)
                    }
                    state.count = res.data.total
                    state.pages = res.data.pages
                }
            })
        }


        const scrollLoad = () => {
            let  current = state.queryData.current+1
            if(current > state.pages){
                state.isShowNot = true
            }else{
                state.queryData.current = current
                getPages()
            }
        }
        const goDetail = (data) => {
            router.push({
            path: '/invite',
            query:{
                infoId: data.id
            }
          })
        }
        

        onMounted(() => {
            getPages()
        })
        return {
            currentTime,
            backageImagesOnSuccess,
            scrollLoad,
            getPages,
            goDetail,
            ...toRefs(state),
        }
    }
}


</script>

<style scoped lang="scss">
.layout-pd {
    .infinite-list {
        height: 100%;
        padding: 0;
        margin: 0 auto;
        list-style: none;
    }

    .infinite-list .infinite-list-item {
        display:flex;
        align-items: center;
        justify-content: center;
        margin: 10px;
    }

    .infinite-list .infinite-list-item+.list-item {
        margin-top: 10px;
    }

    .div-time {
        margin-bottom: 10px;
    }

    .div-card {
        width: 500px;
        background-color: white;


        .div-head {
            height: 45px;
            border-bottom: 1px solid #ccc !important;
            padding: 14px;
            border-color: #cdcdcd75 !important;
        }

        .div-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 45px;
            padding: 14px;
        }

        .div-bottom {
            font-size: 12px;
            border-top: 1px solid #ccc !important;
            border-color: #cdcdcd75 !important;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 30px;
            padding: 14px;
            cursor: pointer;
        }

        .div-bottom:hover {
            background-color: #87f7de75;
        }

        .p-icon {
            font-size: 14px !important;
            color: #adadac;
        }
    }





}
</style>